<template>
  <div class="home">
    <Content>
      <!-- 轮播 -->
        <Swiper :bannerList="bannerList"/>

      <!--小图标 -->   
        <div class="icon-container">
            <IconBox :iconList="iconList" :ColumnNum="4"/>
        </div>
      <div class="feng"></div>  

      <!-- 全民砍价 -->
      <div @click="goBargainList">
        <Bargain :bargainList="bargainList">
        </Bargain>
      </div>  
      <div class="feng"></div>  
      
      <!-- 精选专题 -->
      <div @click="goScrollList">
        <Xscroll :scrollList="scrollList"/>
      </div>  
      <div class="feng"></div>  

      <!-- 人气推荐 -->
      <div class="recommend">
        <Recommend :recommendList="recommendList"/>
      </div>

    </Content>
  </div>
</template>

<script>
import Content from '../components/content/Content';
import Swiper from '../components/swiper/Swiper';//轮播组件
import IconBox from '../components/iconbox/Icon';//小图标组件
import Bargain from '../components/bargain/Bargain';//砍价组件
import Xscroll from "../components/scroll/Xscroll";//精选组件
import Recommend from "../components/recommend/Recommend"; //人气推荐

export default {
  name: 'Home',
  components: {Swiper,Content,IconBox,Bargain,Xscroll,Recommend},
  data(){
    return{
      bannerList:[], //保存轮播数据
      iconList: [
        {
          img:
            "https://tse2-mm.cn.bing.net/th/id/OIP.cJsWpMlzJb_5KHFGrS_WKgHaHa?w=177&h=180&c=7&o=5&dpr=1.25&pid=1.7",
          title: "分享",
          path: "/share",
        },
        {
          img:
            "https://tse3-mm.cn.bing.net/th/id/OIP.-kHu8BXH4Kva_SR5vH0NsAAAAA?w=183&h=183&c=7&o=5&dpr=1.25&pid=1.7",
          title: "礼券",
          path: "/gift",
        },
        {
          img:
            "https://tse3-mm.cn.bing.net/th/id/OIP.8Ddmtbu4VvoP5bOj9M5EPQAAAA?w=178&h=180&c=7&o=5&dpr=1.25&pid=1.7",
          title: "砍价",
          path: "/bargaining",
        },
        {
          img:
            "https://tse3-mm.cn.bing.net/th/id/OIP.Si78595RjeGH3mgaVMN2TAAAAA?w=174&h=180&c=7&o=5&dpr=1.25&pid=1.7",
          title: "专栏",
          path: "/colum",
        },
      ],//保存小图标数据
      bargainList:[],//保存砍价数据
      scrollList:[],//保存精选数据
      recommendList:[],//保存推荐数据
    }
  },
 
  mounted(){
    this.$API.getBanner().then((res)=>{
      // console.log(res)
        this.bannerList=res.data.data;
    }),

    this.$API.getBargain().then((res) => {
      // console.log(res)
      this.bargainList = res.data.data;
      this.bargainList = this.bargainList.slice(14,17);
    });

    this.$API.getScroll().then((res) =>{
      // console.log(res);
      this.scrollList = res.data.data;
    });

    this.$API.getRecommend().then((res)=>{
      // console.log(res);
      this.recommendList=res.data.data;
      this.recommendList = this.recommendList.slice(6,20);
    })
  },
  methods:{
    //点击全名砍价 跳转--->全名砍价
    goBargainList(){
      this.$router.push("/bargainList");
    },
    goScrollList(){
      this.$router.push("/scrollList");
    },
    goRecommendList(){
      this.$router.push("/recommendList");
    },
  },
}
</script>

<style scoped>
*{
  margin:0px;
  padding:0px;
}
.home{
  width:100%;
  height:100%;
}
.icon-container{
  width:100%;
  height:120px;
  margin-top:-4rem;
  background-color:white;
  border-top-left-radius:30px;
  border-top-right-radius:30px;
}
.feng{
  width:100%;
  height:0.4rem;
  background-color:rgb(231, 229, 229);
}
.recommend{
  width:100%;
  height:90vh;
}
</style>
